<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title><style>
        table{
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        th{
            border: 1px solid #333;

        }
        thead tr{
            display: table-row;
            border-color: inherit;
            vertical-align: inherit;
            height: 40px;
            background-color: #ccc;
            border: 1px solid #333;
        }
        td{
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>爱好</th>
                <th>特长</th>
                <th>住址</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>弟弟</td>
                <td>18</td>
                <td>男</td>
                <td>playGames</td>
                <td>跳绳</td>
                <td>南京</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>西西</td>
                <td>18</td>
                <td>男</td>
                <td>playGames</td>
                <td>跳绳</td>
                <td>南京</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>Alice</td>
                <td>18</td>
                <td>男</td>
                <td>playGames</td>
                <td>跳绳</td>
                <td>南京</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>阿计</td>
                <td>18</td>
                <td>男</td>
                <td>playGames</td>
                <td>跳绳</td>
                <td>南京</td>
                <td><button>删除</button></td>
            </tr>
        </tbody>
        <script>    
            let btn = document.querySelectorAll('button');
                for(let i = 0; i< btn.length; i++){
                    btn[i].onclick = function(){
                        this.parentNode.parentNode.remove()
                }
            }
        </script>
</body>
</html>